<script setup lang="ts">
import { ref, readonly, defineAsyncComponent } from 'vue';
import { usePeople } from '@/api/home';
import type { IECOption } from '@/components/echarts/type';

// 公司信息 可视化
const Echarts = defineAsyncComponent(() => import('@/components/echarts/index.vue'));
// echarts dom
const echartsDom = ref();
// x轴数据
const xData = ref<string[]>([]);
// y轴数据
const yData = ref<number[]>([]);
// 是否异常
const abnormal = ref<boolean>(false);

const options: IECOption = readonly({
	backgroundColor: '',
	xAxis: {
		// x 轴类型
		type: 'category',
		// x 轴数据
		data: xData,
		//坐标轴轴线相关设置。数学上的x轴
		axisLine: {
			//不显示X轴
			show: false,
		},
		//坐标轴两边留白
		boundaryGap: true,
		// 是否显示坐标轴刻度
		axisTick: {
			//不显示刻度
			show: false,
			//刻度与标签对齐
			alignWithLabel: true,
		},
	},
	yAxis: {
		type: 'value',
		// y 轴数据最小间隔
		minInterval: 1,
		splitLine: {
			//网格线
			show: true,
			// 网格线样式
			lineStyle: {
				// 网格线颜色
				color: '#d9d9d9',
				//设置网格线类型 dotted：虚线   solid:实线
				type: 'dashed',
				//设置网格线宽度
				width: 1,
			},
		},
		//坐标轴轴线相关设置。数学上的y轴
		axisLine: {
			//不显示Y轴
			show: false,
		},
		// 是否显示坐标轴刻度
		axisTick: {
			//不显示刻度
			show: false,
		},
		//网格区域
		splitArea: {
			//不显示网格区域
			show: false,
		},
	},
	grid: {
		top: '20px',
		left: '20px',
		right: '20px',
		bottom: '20px',
		// 是否预留坐标轴宽度
		containLabel: true,
	},
	tooltip: { trigger: 'axis' },
	series: [
		{
			// 数据
			data: yData,
			// 曲线列表
			type: 'line',
			// 平滑曲线
			smooth: true,
			// 实心圆点
			symbol: 'circle',
			//拐点大小
			symbolSize: 6,
		},
	],
});

// 请求数据
const getProple = async () => {
	try {
		const data = await usePeople();
		xData.value.length = yData.value.length = 0;
		if (!data.length) return;
		data.forEach(item => {
			xData.value.push(item.role);
			yData.value.push(item.num);
		});
		echartsDom.value?.handleEcharts();
	} catch {
		abnormal.value = true;
		throw new Error('岗位人员信息未知异常,请联系开发人员');
	}
};
getProple();
</script>

<template>
	<div class="people">
		<div v-if="abnormal" class="error">数据加载异常</div>
		<Echarts v-else ref="echartsDom" :options="options" />
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
